<template>
  <div class="gu-line-charts-box">
    <div class="line-box" v-if="nutrition_data !=null">
        <div class="title-box" v-if="nutrition_data !=null">
          <div class="left" v-if="nutrition_data.data.length>0">
              {{nutrition_data.data[swiperIndex].day}}
          </div>
          <div class="right" v-if="nutrition_data.data.length>0">
            <span>{{nutrition_data.proposal + nutrition_data.heat_company}}</span>
          </div>
        </div>

        <div class="line-content" v-if="nutrition_data.data.length>0">
           <div class="top">
             <swiper :options="swiperOption" ref="mySwiper" @slideChangeTransitionEnd="slideEnds" @sliderMove="moves">
               <swiper-slide  v-for="(item,index) in nutrition_data.data" :key="index" >
                 <div class="line" @click="weekLineClick(item)">
                   <div class="line-height">
                     <div class="line-div"
                     :style="{height:item.percentage,backgroundColor:index == swiperIndex ?'#fe0000':bgColor}"
                     ></div>
                   </div>
                   <div class="week-box">
                      <div class="week">
                       <span class="span" :style="{color:index == swiperIndex ? '#fe0000':'#414141'}">{{item.title}}</span>
                      </div>
                   </div>
               </div>
               </swiper-slide>
            </swiper>

              <!-- 后面显示标注的div -->
              <div class="line txt-right">
                <span class="zeo-span">0{{nutrition_data.heat_company}}</span>
                <span class="average-span" :style="{bottom:nutrition_data.average_percentage}">{{nutrition_data.average}}千卡</span>
                <span class="top-line-span"></span>
              </div>


            <!-- 0开始的线 -->
            <div class="zeo-line"></div>

            <!-- 平均线 -->
            <div class="average-line" :style="{bottom:nutrition_data.average_percentage}"></div>

            <!-- 顶部线 -->
            <div class="top-line"></div>

           </div>

        </div>
    </div>

    <div class="bottom-block" v-if="nutrition_data !=null && nutrition_data.data.length>0">
      <div class="bottom-flex">
        <div class="item-box">
            <div class="title">热量</div>
             <div class="num" style="color: #fe0000;">
                {{nutrition_data.data[swiperIndex].heat}}
               <span class="comp" style="color: #fe0000;">{{nutrition_data.heat_company}}</span>
             </div>
        </div>
        <div class="item-box">
            <div class="title">碳水化合物</div>
             <div class="num">
               {{nutrition_data.data[swiperIndex].carbohydrate}}
               <span class="comp">{{nutrition_data.carbohydrate_company}}</span>
             </div>
        </div>
        <div class="item-box">
            <div class="title">蛋白质</div>
             <div class="num">
               {{nutrition_data.data[swiperIndex].protein}}
               <span class="comp">{{nutrition_data.protein_company}}</span>
             </div>
        </div>
        <div class="item-box">
            <div class="title">脂肪</div>
             <div class="num">
               {{nutrition_data.data[swiperIndex].fat}}
               <span class="comp">{{nutrition_data.fat_company}}</span>
             </div>
        </div>
      </div>
    </div>



  </div>
</template>

<script>


  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  import 'swiper/dist/css/swiper.css'
export default{
  name: 'gu_line_chart',
  data(){
    let _this = this
    return{
      slidesGrid:[],
      swiperIndex:0,
      is_true:true,
      swiperOption:{
        centeredSlides:true,
        slidesPerView: 9,
        paginationClickable: false,
        spaceBetween: 0,
        slidesOffsetBefore:0,
        observer:true,//修改swiper自己或子元素时，自动初始化swiper
        observeParents:true,//修改swiper的父元素时，自动初始化swiper
      }
    }
  },

  props:{
    nutrition_data:{
      type:Object,
      default:{}
    },
    bgColor:{
      type:String,
      default:"#fcb251"
    },

  },

  methods:{

    slideEnds(index){
      /* let sw = this.$refs.mySwiper.swiper.activeIndex
      this.swiperIndex = sw
      let item = this.nutrition_data.data[sw]
      console.log(item)
      this.$emit("swiperLover",item) */

    },
    moves(){

    },
    weekLineClick(item){
      this.$emit("weekLineClick",item)
    },
    swiperSliderTo(){
      this.$nextTick(()=>{
        let ind = this.swiperIndex
        let to = ind + 10
        this.swiperIndex = to
        let sw = this.$refs.mySwiper.swiper
        sw.slideTo(to, 0, true)
      })
    },

    initSwiper(ind){
      this.$nextTick(()=>{
         this.swiperIndex = ind
        let sw = this.$refs.mySwiper.swiper
        sw.slideTo(ind,0, true)
      })
    }
  },
  mounted() {


  },
   components: {
      swiper,
      swiperSlide
    }
}
</script>

<style lang="stylus" scoped="scoped">
  .gu-line-charts-box{
    background-color:#FFFFFF;
    .line-box{
      width: 100%;
      background-color:#FFFFFF;
      .swiper-container{
        width:100%;
      }
      /* 顶部标题 */
      .title-box{
        width:100%;
        display:flex;
        justify-content:flex-start;
        align-items:center;
        color:#353535;
        box-sizing:border-box;
        padding:20px 8px 0 8px;
        .left{
          flex-grow:0;
          font-size:12px;
          white-space:nowrap;
          font-weight:bold;
        }
        .right{
          flex-grow:1;
          font-size:10px;
          text-align:right;
          color:#818181;
        }
      }

      /*  中间内容区 */
      .line-content{
        width:100%;
        padding:4px 0 0 0px;
        box-sizing:border-box;
        position:relative;

        .top{
          width:100%;
          height:210px;
          position:relative;
          display:flex;
          justify-content:flex-start;
          align-items:center;
          text-align:left;
          box-sizing:border-box;
          .zeo-line{
            position:absolute;
            left:0;
            right:0;
            bottom:20px;
            width:100%;
            border-bottom:1px solid #e5e5e5;
          }
          .average-line{
            position:absolute;
            bottom:78%;
            left:0;
            right:0;
            width:100%;
            border-bottom:1px dashed #dcdcdc;
          }
          .top-line{
            position:absolute;
            left:0;
            right:0;
            top:-4px;
            width:100%;
            border-bottom:1px solid #e5e5e5;
          }
          .line{
            height:100%;
            flex-grow:1;
            position:relative;
            width:100%;
            margin:0;
            height:100%;
            .zeo-span{
              position:absolute;
              bottom:26px;
              right:8px;
              color:#808080;
              font-size:10px;
              line-height:10px;
              z-index:1000;
              white-space: nowrap;
            }
            .average-span{
              position:absolute;
              bottom:78%;
              right:8px;
              color:#808080;
              font-size:10px;
              line-height:10px;
              padding-bottom 4px;
              z-index:1000;
              white-space: nowrap;
            }
          }
          .line-height{
            height:192px;
            position:relative;
            .line-div{
              position:absolute;
              bottom:0;
              left:50%;
              width:12px;
              height:0;
              margin-left:-6px;
              background-color:#f5f5f5;
              border-radius:12px 12px;
             /* transition:height 0.3s; */
              z-index:99;
            }
            .line-div-ac{
              background-color:#fcb251;
            }
          }

        .txt-right{
          text-align:right;
          flex-grow:0;
          min-width:30px;
          max-width:30px;
          position:absolute;
          right:0;
        }
        }

        .week-box{
          display:flex;
          justify-content:flex-start;
          align-items:center;
          box-sizing:border-box;
          .week{
            flex-grow:1;
            height:24px;
            line-height:1.2;
            color:#808080;
            padding-top:6px;
            box-sizing:border-box;
            text-align:center;
            .span{
              font-size:10px;
            }
            .span-ac{
              color:#fdb151;
            }
          }
        }
      }
    }

    .bottom-block{
      background-color:#FFFFFF;
      width:100%;
      box-sizing:border-box;
      padding:36px 16px 30px 16px;
      .bottom-flex{
        display:flex;
        justify-content:flex-start;
        align-items:center;
         flex-wrap:wrap;
        .item-box{
          flex-grow:1;
          width:50%;
          max-width:50%;
          min-width:50%;
          .title{
            font-size:10px;
            line-height:1.2;
            color:#808080;
            padding-bottom:10px
          }
          .num{
            line-height:1.2;
            font-size:24px;
            font-weight:bold;
            color:#000000;
            .comp{
              font-size:10px;
              color:#808080;
              font-weight:normal;
            }
          }
        }
        .item-box:nth-of-type(1){
          padding-bottom:40px;
        }
        .item-box:nth-of-type(2){
          padding-bottom:40px;
        }
      }
    }


  }
</style>
